<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/iconfont.css">
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/styles.css">
<script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
<script src="js/bootstrap.min.js" charset="UTF-8"></script>
<script src="js/swiper.min.js" charset="UTF-8"></script>
<script src="js/global.js" charset="UTF-8"></script>
<script src="js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css"
	href="../admin/layui/css/layui.css" />
<script src="../admin/layui/layui.js" type="text/javascript"
	charset="utf-8"></script>
<title>U袋网</title>
</head>
<body>
	<!-- 顶部tab -->
	<!-- 引入头部 -->
	<jsp:include page="header.jsp"></jsp:include>

	<div class="content clearfix bgf5">
		<section class="user-center inner clearfix">
			<!-- 引入左侧导航栏 -->
			<jsp:include page="pull-left-bgf.jsp"></jsp:include>

			<div class="pull-right">
				<c:forEach items="${addOderDetail }" var="addOderDetail">
					<div class="user-content__box clearfix bgf">
						<div class="title">订单中心-商品评价</div>
						<div class="evaluate_box">
							<div class="evaluate_info posr clearfix">
								<div class="img">
									<img src="../admin/showPic/${addOderDetail.proUrl }" alt=""
										class="cover">
								</div>
								<div class="name ep2">${addOderDetail.proName }</div>
								<div class="param">
									<div class="param-row">
										<span class="param-label">价格</span><b class="cr fz24">${addOderDetail.proPrice }</b><span
											class="cr">元</span>
									</div>
									<div class="param-row">
										<span class="param-label">购买数量</span><span class="c6 fz20">${addOderDetail.proNum }</span>
									</div>
									<div class="param-row">
										<span class="param-label">付款</span><span class="c6 fz20">${addOderDetail.proNum*addOderDetail.proPrice }元</span>
									</div>
								</div>
								<div class="info c6">
									材质：${addOderDetail.material }<br> 品牌：${addOderDetail.brand }<br>
									<!-- 2017年08月11日 20:31 -->
									现在查看的是您所购商品的信息 于${geyByid.ordTime }下单购买了此商品
								</div>
							</div>
						</div>
						<p class="fz18 cr">商品评价</p>
						<div class="modify_div">
							<form action="" method="post" class="evaluate-form__box">
								<span class="help-block">快评论一番，让其他买家开开眼</span>
								<table class="table table-bordered">
									<!-- <tr>
										<th scope="row">评价等级</th>
										<td class="user-form-group fz0"><label><input
												name="opinion" value="G" checked="" type="radio"><i
												class="iconfont icon-radio"></i> <span>好评</span></label> <label><input
												name="opinion" value="N" type="radio"><i
												class="iconfont icon-radio"></i> <span>中评</span></label> <label><input
												name="opinion" value="B" type="radio"><i
												class="iconfont icon-radio"></i> <span>差评</span></label></td>
									</tr> -->
									<tr>
										<th scope="row">评价商品</th>
										<td>
										 <textarea rows="5" placeholder="请输入您对该商品的评价~" name="content" id="content"></textarea>
										 <input type="text" name="proid" value="${addOderDetail.proId }" style="display: none;" id="ids">
										</td>
									</tr>
									<tr valign="middle">
										<th scope="row">晒图片</th>
										<td>
											<ul class="uploader__files"></ul> <!-- <div class="uploader__input"></div> -->
											<div class="layui-form-item">
												<label class="layui-form-label">图片</label>
												<div class="layui-input-inline">
													<input type="file" name="pictureFile" class="pictureFileAdd"
														placeholder="请选择" autocomplete="off" class="layui-input">
													<input type="text" name="picture" id="imgUrlAdd">
													<!-- 隐藏域，为了提交时存图片的地址 -->
													<img src="" id="imgShowAdd" />
													<!-- 图片展示 -->
												</div>
											</div>
											<!-- <div class="uploader__size">
												<span class="cr">0</span>/5
											</div> -->
										</td>
									</tr>
								</table>
								<div class="checkbox">
									<label></label>
									<button type="submit" class="but pull-right" onclick="addPingLun()" lay-filter="addPingLun">提交评价</button>
								</div>
								<script>
								function addPingLun() {
									//选中购物车id
									var id = $("#ids").val();
									console.log(id);
									var content =$("#content").val();
									console.log(content);
									var picture = $("#imgUrlAdd").val();
									console.log(picture);
									$.post("insertEvaluation", {
										"proid" : id,
										"content":content,
										"picture":picture
									}, function(res) {
										if(res.code==0){
											alert("交易成功");
											window.location.href="getOderList"
										}
									}, "json");
								}
								
								layui.use([ 'table', 'form', 'layer','upload'], function() {
									var table = layui.table;
									var form = layui.form;
									var layer = layui.layer;
									var $ = layui.$;
									var upload = layui.upload;
									
									/* form.on('submit(addPingLun)', function(data) {
										$.post("insertEvaluation", data.field, function(res) {
											console.log(res);
											if (res.code == 0) {
												alert("评论成功");
											} else {
												alert("评论失败");
											}
										}, "json");
										return false;
									});
								}); */
								//图片上传的代码--添加
								upload.render({
									elem : '.pictureFileAdd', //指定选择文件的容器
									url : 'imgUploads', //服务端的地址
									method : 'post',// 类型
									done : function(res, index, upload) {
										console.log(res);
										
										
										if (res.code == 0) {
											var imgUrl = JSON.parse(res.data);
											lujing=imgUrl.src
											
											//var item = $(this).item;
											console.log(index);
											//$(item).sublings("input").val(lujing)
											$("#imgUrlAdd").val(lujing); //设置隐藏域的值
											//$("#imgShowAdd").attr("src","../"+imgUrl.src); //设置图片展示
											$("#imgShowAdd").attr("src","showPic/"+lujing); //设置图片展示
										}
									}
								});
								});
								</script>
							</form>
						</div>
					</div>
				</c:forEach>
			</div>
		</section>
	</div>

	<!-- 引入右侧菜单 -->
	<jsp:include page="right-nav.jsp"></jsp:include>
	<!-- 底部信息 -->
	<!-- 引入脚部 -->
	<jsp:include page="footer.jsp"></jsp:include>
</body>
</html>